<template>
	<div class="model-del">
		<div class="shade"></div>
		<div class="popup">
			<div class="title justify-content-between">
				<span class="fs28 colorFFF">任务删除</span>
				<img src="../assets/images/icon-close.png" @click="cancel">
			</div>
            <div class="txt">
                <img src="../assets/images/icon-del-big.png">是否确认删除此项任务？
            </div>
            <div class="btns justify-content-center">
                <div class="btn sure" v-loading="loading" @click="del">确认</div>
                <div class="btn cancel" @click="cancel">取消</div>
            </div>
		</div>
	</div>
</template>

<script>
export default {
    name: 'ModelDel',
    props: {
    	modelId: Number //型号id
    },
    data () {
        return {
            loading: false //加载中
        }
    },
    methods: {
        /**
         * 关闭弹窗
         * @param {Number} refresh - 是否刷新 1是
         */
    	cancel(refresh) {
    		this.$emit('cancel', refresh);
    	},
        // 删除
        del() {
            let _this = this;
            let params = {
                id: _this.modelId
            };
            _this.loading = true;
            _this.axios.modelDel(params).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    _this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                    _this.cancel(1);
                }
                _this.loading = false;
            }).catch(function (error) {
                _this.loading = false;
                _this.$message.error(error.msg);
            });
        }
    }
}
</script>

<style scoped lang='less'>
    @import url('../assets/css/public.css');
    .model-del {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 999;
    	.shade {width: 100%;height: 100%;background: rgba(0,0,0,.3);}
		.popup {width: 507rem;height: 350rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #FFF;box-shadow: 0 5rem 15rem 0 rgba(0, 21, 54, 0.25);
			.title {width: 100%;height: 58rem;background-color: #285FE3;padding: 0 20rem 0 25rem;
				img {width: 23rem;height: 23rem;cursor: pointer;}
			}
            .txt {width: 100%;display: flex;align-items: center;justify-content: center;margin-top: 76rem;font-size: 24rem;color: #161D2E;
                img {margin-right: 12rem;width: 53rem;height: 59rem;}
            }
            .btns {width: 100%;margin-top: 84rem;
                .btn {width: 130rem;height: 40rem;margin-left: 52rem;line-height: 40rem;text-align: center;border-radius: 3rem;font-size: 22rem;cursor: pointer;}
                .btn.sure {background: linear-gradient(0deg, #00A366 0%, #00C37A 100%);color: #FFF;}
                .btn.cancel {border: 1px solid #316EFF;background: linear-gradient(0deg, #D9DDE8 0%, #FFFFFF 100%);color: #505971;}
                .btn:first-child {margin-left: 0;}
            }
		}
	}
</style>